/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import 'highlight.js/styles/atom-one-light.css';
import React15 from '@/assets/images/advanceReact/react15.png';
import React15Relation from '@/assets/images/advanceReact/reac15-relation.png';
import React16_3 from '@/assets/images/advanceReact/react16_3.png';
import React16_4 from '@/assets/images/advanceReact/react16_4.png';

import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});

export default function LifeCircle() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="React15-生命周期" key="1">
          <div style={{ display: 'flex', gap: 20 }}>
            <img src={React15} width="30%" alt="" />
            <img src={React15Relation} width="50%" alt="" />
          </div>
        </Panel>
        <Panel header="React16-生命周期" key="2">
          <h2>v16.3</h2>
          <div style={{ display: 'flex', gap: 20 }}>
            <img src={React16_3} width="75%" alt="" />
            <section>
              <p>
                <b>挂载阶段：</b>废弃了componentWillMount，新增getDerivedStateFromProps
              </p>
              <p>
                <b>更新阶段：</b>
                废弃了componentWillReceiveProps、componentWillUpdate，新增getDerivedStateFromProps、getS
                an pgetSnapshotBeforeUpdater
                <br />
                <b>目的：</b>
                componentWillReceiveProps可以访问this，可能会产生副作用操作，而getDerivedStateFromProps是个
                静态方法，没有this，从而保证生命周期可控、可预测，避免生命周期的滥用
                <br />
                <i>（注：为了替换componentWillReceiveProps，使用props来派生/更新state）</i>
              </p>
            </section>
          </div>
          <br />
          <i>注：此阶段render方法此时已经支持方会元素数组和字符串，无需返回单个元素</i>
          <br />
          <h2>&gt;v16.4</h2>
          <div style={{ display: 'flex', gap: 20 }}>
            <img src={React16_4} width="75%" alt="" />
            <section>只是getDerivedStateFromProps的触发动作变多了</section>
          </div>
        </Panel>
        <Panel header="React改造生命周期的主要动机" key="3">
          配合fiber架构带来的异步渲染机制，因为被删除的那3个函数在新的架构下，处于render阶段，
          可能会被重复调用，因为能直接接触到this，所以会产生严重的后果。
        </Panel>
      </Collapse>
    </div>
  );
}
